<template>
  <div>
    <modal-header right="设备详情" @back="close" />
    <div class="content-padding" style="padding-bottom: 0;">
      <badge text="设备信息" />
      <a-row class="see_row">
        <a-col :span="8">
          <span class="title-label">设备编号：</span>
          {{ data.deviceNo || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">ICCID：</span>
          {{ data.iccid || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">设备品牌：</span>
          {{ data.brandName || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">设备型号：</span>
          {{ data.modelName || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">SIM卡类型：</span>
          {{ data.simCardType || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">SN号：</span>
          {{ data.snNo || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">SIM卡号：</span>
          {{ data.simCardNo || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">IMSI：</span>
          {{ data.imsiNo || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">SIM卡最晚激活时间：</span>
          {{ data.latestActivationTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">总流量：</span>
          {{ data.totalFlow || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">厂家发货时间：</span>
          {{ data.factoryDeliveryTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">骑圈发货时间：</span>
          {{ data.qqDeliveryTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">添加时间：</span>
          {{ data.createTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">批次号：</span>
          {{ data.batchNo || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">原ICCID：</span>
          {{ data.originalIccid || "-" }}
        </a-col>

        <!-- 1.7.2 -->
        <a-col :span="8">
          <span class="title-label">返修状态：</span>
          {{ data.deviceRepairStatus ? DEVICE_REPAIR_STATUS[data.deviceRepairStatus]: "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">返修单号：</span>
          <template v-if="data.deviceRepairOrderNo">
            <a :href="`/#/sales/salesManager/deviceBackRepair?id=${data.deviceRepairId}`" target="_blank">{{
              data.deviceRepairOrderNo }}</a>
          </template>
          <template v-else>
            -
          </template>
        </a-col>

        <a-col :span="8">
          <span class="title-label">MAC：</span>
          {{ data.macNo || "-" }}
        </a-col>

        <a-col :span="8">
          <span class="title-label">蓝牙动态码：</span>
          {{ data.bluetoothDynamicCode || "-" }}
        </a-col>

      </a-row>
    </div>
    <div style="background-color: #f0f2f5;height: 12px;"></div>
    <div class="content-padding" style="padding-bottom: 0;">
      <badge text="设备相关信息" />
      <a-row class="see_row">
        <a-col :span="8">
          <span class="title-label">设备在线状态：</span>
          <span v-if="data.onlineStatus === 1" style="color: green;">在线</span>
          <span v-if="data.onlineStatus === 2" style="color: red;">不在线</span>
        </a-col>
        <a-col :span="8">
          <span class="title-label">最晚心跳时间：</span>
          {{ data.lastHeartbeatTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">最近登录时间：</span>
          {{ data.lastLoginTime || "-" }}
        </a-col>
        <a-col :span="8">

          <div style="display: flex;">
            <span class="title-label">启用状态：</span>
            <span class="flex_start" v-if="data.enableStatus === 0">
              <span class="yuan red"></span>
              已停用
            </span>
            <span class="flex_start" v-if="data.enableStatus === 1">
              <span class="yuan green"></span>
              已启用
            </span>
          </div>

          <!-- 启/停状态:0停用 1启用 2已报废 -->
        </a-col>
        <a-col :span="8" v-if="data.enableStatus===1">
          <span class="title-label">启用时间：</span>
          {{ data.enableTime || "-" }}
        </a-col>
        <a-col :span="8" v-if="data.enableStatus===0">
          <span class="title-label">停用时间：</span>
          {{ data.enableTime || "-" }}

        </a-col>
      </a-row>
    </div>
    <div style="background-color: #f0f2f5;height: 12px;"></div>
    <div class="content-padding" style="padding-bottom: 0;">
      <badge text="关联信息" />
      <a-row class="see_row">
        <a-col :span="8" style="display: flex;overflow: hidden;">
          <span class="title-label">关联状态：</span>
          <a-tag style="height: 20px;" v-if="data.associatedStatus === 1" class="color_orange">已分配</a-tag>
          <a-tag style="height: 20px;" v-if="data.associatedStatus === 2" class="color_lightBlue">待关联</a-tag>
          <a-tag style="height: 20px;" v-if="data.associatedStatus === 3" class="color_green">已关联</a-tag>
          <!-- 关联状态:1已分配 2待关联 3已关联 -->
        </a-col>
        <a-col :span="8">
          <span class="title-label">关联时间：</span>
          {{ data.associatedTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">关联车牌：</span>
          {{ data.licensePlateNo || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">关联车架号：</span>
          {{ data.vinNo || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">关联企业：</span>
          {{ data.companyName || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">关联供应商：</span>
          {{ data.providerName || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">关联门店：</span>
          {{ data.storeName || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">分配时间：</span>
          {{ data.allocateTime || "-" }}
        </a-col>
      </a-row>
    </div>
    <div style="background-color: #f0f2f5;height: 12px;"></div>
    <div class="content-padding" style="padding-bottom: 0;">
      <badge text="物联信息" />
      <a-row class="see_row">
        <a-col :span="8">
          <div style="display: flex;">
            <span class="title-label">卡状态：</span>
            <span class="flex_start" v-if="data.cardStatus === 1">
              <span class="yuan green"></span>
              正常
            </span>
            <span class="flex_start" v-if="data.cardStatus === 2">
              <span class="yuan orange"></span>
              停机
            </span>
            <span class="flex_start" v-if="data.cardStatus === 3">
              <span class="yuan gray"></span>
              待激活
            </span>
            <span class="flex_start" v-if="data.cardStatus === 4">
              <span class="yuan red"></span>
              冻结
            </span>
            <span class="flex_start" v-if="data.cardStatus === 5">
              <span class="yuan red"></span>
              销号
            </span>
            <span class="flex_start" v-if="data.cardStatus === 6">
              <span class="yuan red"></span>
              沉默期
            </span>
            <span class="flex_start" v-if="data.cardStatus === 7">
              <span class="yuan red"></span>
              测试期
            </span>
            <span class="flex_start" v-if="data.cardStatus === 8">
              <span class="yuan red"></span>
              停机保号
            </span>
          </div>
          <!-- 卡状态:1正常 2停机 3待激活 4冻结 5销号 6沉默期 7测试期 8停机保号 -->
        </a-col>
        <a-col :span="8">
          <span class="title-label">过期时间：</span>
          {{ data.expirationTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">激活时间：</span>
          {{ data.activationTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">已使用流量：</span>
          {{ data.usedFlow || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">剩余流量：</span>
          {{ data.remainFlow || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">卡备注：</span>
          {{ data.remark || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">停机时间：</span>
          {{ data.shutdownTime || "-" }}
        </a-col>
        <a-col :span="8">
          <span class="title-label">销户时间：</span>
          {{ data.accountCancellationTime || "-" }}
        </a-col>
      </a-row>
    </div>
    <div style="background-color: #f0f2f5;height: 12px;"></div>
    <div class="content-padding" style="padding-bottom: 0;">
      <badge text="修改记录" />
      <a-table :columns="columns" :dataSource="recordList" :pagination="false" :scroll="{ y: 300 }">
      </a-table>
    </div>
  </div>
</template>
<script>
// import Empty from '@/components/Empty/Empty'
import modalHeader from '@/components/modal-header'
import badge from '@/components/badge'
import { deviceStoreDetail, deviceStoreChangeLog } from '@/services/deviceManament'
const DEVICE_REPAIR_STATUS = {
  1: '待审核', 2: '审核不通过', 3: '待商户发货', 4: '待收货确认', 5: '待返厂', 6: '拒收退回', 7: '退回已签收', 8: '已返厂', 9: '已结束', 10: '待发货', 11: '待签收', 12: '已完成'
}
export default {
  components: {
    modalHeader,
    badge
  },

  data () {
    return {
      DEVICE_REPAIR_STATUS,
      id: null,
      data: {},
      recordList: [],
      columns: [
        {
          title: '修改用户',
          dataIndex: 'createUserName',
          key: 'createUserName',
          // width: 140,
          ellipsis: true,
          customRender: (text) => text || '-'
        },
        {
          title: '修改时间',
          dataIndex: 'createTime',
          key: 'createTime',
          // width: 140,
          ellipsis: true,
          customRender: (text) => text || '-'
        },
        {
          title: '修改内容',
          dataIndex: 'changeContent',
          key: 'changeContent',
          // width: 140,
          ellipsis: true,
          customRender: (text) => text || '-'
        }
      ]
    }
  },
  methods: {
    open (record) {
      this.id = record.id
      this.getDetail()
      this.getLog()
    },
    async getLog () {
      const res = await deviceStoreChangeLog({ deviceId: this.id })
      if (res.isSuccess) {
        this.recordList = res.data
      } else {
        this.$message.newFun(res.msg, 'error', 2)
      }
    },
    async getDetail () {
      const res = await deviceStoreDetail(this.id)
      if (res.isSuccess) {
        this.data = res.data
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>
